<template>
  <div class="capacity-card">
    <div class="title">储量预警</div>

    <div class="bar">
      <div
        v-for="(seg, i) in segments"
        :key="i"
        class="seg"
        :style="{ flex: seg.width, background: seg.color }"
      />
    </div>

    <div class="ticks">
      <span v-for="t in ticks" :key="t">{{ t }}%</span>
    </div>
  </div>
</template>

<script setup>
const segments = [
  { width: 20, color: '#b51d1d' },  // 0–20 %
  { width: 20, color: '#e06b16' },  // 20–40 %
  { width: 20, color: '#c59d53' },  // 40–60 %
  { width: 20, color: '#489edb' },  // 60–80 %
  { width: 20, color: '#21863e' }   // 80–100 %
];

const ticks = [0, 20, 40, 60, 80, 100];
</script>

<style lang="scss" scoped>
.capacity-card {
  width: 260px;
  padding: 6px 10px;
  background: rgba(0, 20, 40, .6);
  color: #fff;
  font-size: 12px;
}

.title { margin-bottom: 4px; font-weight: 600; 

cursor: pointer;}

.bar {
  height: 22px;
  display: flex;
  border: 1px solid #999;
  margin-bottom: 4px;
}

.seg:not(:last-child) { border-right: 1px solid #333; }

.ticks {
  display: flex;
  justify-content: space-between;
}
</style>